<template>
  <div class="login-container-wrapper">
    <!-- 登录表单容器 -->
    <div class="login-container">
      <!-- 标题 -->
      <div class="title">欢迎登陆博客管理系统</div>
      <!-- 登录表单 -->
      <div>
        <a-form size="large" :model="form" @submit="handleSubmit" auto-label-width>
          <a-form-item
            hide-asterisk
            field="username"
            label=""
            :rules="[{ required: true, message: '请输入用户名' }]"
          >
            <a-input v-model="form.username" placeholder="请输入你的用户名" allow-clear>
              <template #prefix>
                <icon-user />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            hide-asterisk
            field="password"
            label=""
            :rules="[{ required: true, message: '请输入密码' }]"
            style="margin-bottom: 0"
          >
            <a-input-password v-model="form.password" placeholder="请输入你的密码" allow-clear>
              <template #prefix>
                <icon-lock />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item field="is_member" style="margin-top: 0; margin-bottom: 0; width: 100%">
            <a-checkbox v-model="form.is_member" style="line-height: 1.5; width: 100%">
              记住密码
            </a-checkbox>
          </a-form-item>
          <a-form-item style="margin-top: 0">
            <a-button html-type="submit" style="width: 100%" :loading="loading"> 登录 </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { LOGIN } from '@/api/vblog'
import { useRouter } from 'vue-router' // 确保导入 useRouter
import app from '@/stores/app'

const form = reactive({
  username: '',
  password: '',
  is_member: false
})

const loading = ref(false)
const router = useRouter()

const handleSubmit = async (data) => {
  if (!data.errors) {
    try {
      loading.value = true
      const resp = await LOGIN(data.values) // 使用 await 等待登录请求
      app.value.token = resp.data
      router.push({ name: 'BackendLayout' })
      // 提交成功后的处理逻辑
    } finally {
      loading.value = false
    }
  }
}
</script>

<style lang="css" scoped>
.login-container-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(255, 204, 204, 0.8),
    /* 浅红色 */ rgba(204, 204, 255, 0.8) /* 浅蓝色 */
  ); /* 渐变背景 */
  backdrop-filter: blur(15px); /* 增强毛玻璃效果 */
}

.title {
  margin-bottom: 20px; /* 增加与输入框的距离 */
  text-align: center;
  font-size: 28px; /* 增加标题字体大小 */
  font-weight: bold;
  color: #333; /* 更深的颜色 */
}

.login-container {
  height: auto; /* 改为 auto，让内容决定高度 */
  width: 400px; /* 使用固定宽度代替百分比，更好控制 */
  padding: 40px 50px; /* 增加内边距 */
  background-color: rgba(255, 255, 255, 0.9); /* 设置为更高透明度的白色背景 */
  border-radius: 12px; /* 增加圆角 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

.login-container :deep(.arco-form-item-label-col) {
  padding-right: 0px;
}

.login-container :deep(.arco-form-size-large, .arco-form-item-wrapper-col) {
  margin-bottom: 15px; /* 增加表单项之间的间距 */
}

.arco-input-password,
.arco-input {
  background-color: rgba(255, 255, 255, 0.9); /* 设置输入框背景颜色为更高透明度的白色 */
  border: solid 1px var(--color-neutral-3); /* 设置边框颜色 */
  border-radius: 6px; /* 输入框圆角 */
}

.arco-input-password:focus,
.arco-input:focus {
  border-color: #007bff; /* 聚焦时边框颜色 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 聚焦时阴影效果 */
}

:deep(.arco-input-wrapper) {
  background-color: rgba(255, 255, 255, 0.9); /* 设置输入框外部背景为更高透明度的白色 */
}

a-button {
  background-color: #007bff; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  border-radius: 6px; /* 按钮圆角 */
  transition:
    background-color 0.3s,
    box-shadow 0.3s; /* 添加过渡效果 */
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* 按钮阴影 */
}

a-button:hover {
  background-color: #0056b3; /* 悬停时按钮颜色 */
  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3); /* 悬停时按钮阴影 */
}
</style>
